<template>
    <div class="menuList pl20 pr20 pt20">
        <avue-crud
            ref="crud"
            v-model="dialogForm"
            :data="data"
            :option="option"
            :search.sync="searchForm"
            :table-loading="loading"
            @search-change="handleSearchChange"
            @on-load="onLoad"
            @row-save="handleRowSave"
            @row-update="handleRowUpdate"
            @row-del="handleRowDel"
        >
            <!-- 列自定义 -->
            <template slot="menuType" slot-scope="scope">
                <el-tag v-if="scope.row.menuType === 1" type="danger">菜单</el-tag>
                <el-tag v-if="scope.row.menuType === 2" type="success">按钮</el-tag>
                <el-tag v-if="scope.row.menuType === 3" type="primary">跳转外链</el-tag>
                <el-tag v-if="scope.row.menuType === 4" type="info">接口权限</el-tag>
            </template>
            <!-- 自定义菜单 -->
            <template slot="menu" slot-scope="{ row }">
                <el-button v-if="row.menuType===4" icon="el-icon-delete" size="mini" style="color: red" type="text"
                           @click="handelDel(row)">删除
                </el-button>
                <el-button icon="el-icon-view" size="mini" type="text" @click="handelView(row)">查看</el-button>
                <el-button v-if="row.menuType===4" icon="el-icon-edit" size="mini" type="text" @click="handelEdit(row)">
                    编辑
                </el-button>
                <el-button v-if="[1,2].includes(row.menuType)" icon="el-icon-circle-plus-outline" size="small"
                           type="text"
                           @click.stop="handleAdd(row)">添加接口权限
                </el-button>
            </template>
        </avue-crud>
    </div>
</template>

<script>
import noPage from '@/mixins/noPage'
import {dic} from "@/config";

export default {
    name: 'menuList',
    mixins: [noPage],
    data() {
        return {
            urls: {
                0: 'menu',
                1: 'findApiByMenuTree'
            },
            searchForm: {},
            dialogForm: {
                menuId: '',
            },
            data: [],
            option: {
                ...window.avueCrud,
                index: false,
                header: false,
                menuWidth: 300,
                align: 'left',
                rowKey: 'id',
                rowParentKey: 'parentId',
                defaultExpandAll: this.defaultExpandAll,
                column: [
                    {
                        label: 'ID',
                        prop: 'id',
                        width: 130,
                        display: false
                    },
                    {
                        label: '菜单名称',
                        prop: 'menuName',
                        display: false,
                    },
                    {
                        label: '菜单类型',
                        prop: 'menuType',
                        type: 'radio',
                        value: 1,
                        display: false,
                        ...dic,
                        dicQuery: {
                            code: 'menuType',
                        },
                    },
                    {
                        label: 'menuId',
                        prop: 'menuId',
                        width: 200,
                        hide: true,
                        span: 24,
                        addDisplay: false,
                        editDisplay: true,
                        rules: [
                            {
                                required: true,
                                message: '请输入menuId',
                                trigger: 'blur',
                            },
                        ],
                    },
                    {
                        label: '接口名称',
                        prop: 'apiName',
                        width: 200,
                        hide: true,
                        span: 24,
                        rules: [
                            {
                                required: true,
                                message: '请输入接口名称',
                                trigger: 'blur',
                            },
                        ],
                    },
                    {
                        label: '接口URL',
                        prop: 'apiUrl',
                        width: 200,
                        span: 24,
                        placeholder: '（例：/user:id）',
                        rules: [
                            {
                                required: true,
                                message: '请输入接口URL',
                                trigger: 'blur',
                            },
                        ],
                    },
                    {
                        label: '请求方式',
                        prop: 'method',
                        width: 200,
                        span: 24,
                        ...dic,
                        type: 'select',
                        dicQuery: {
                            code: 'method',
                        },
                        props: {
                            label: 'dictValue',
                            value: 'dictKey'
                        }
                    },
                ],
            },
            rowData: {}
        }
    },
    methods: {
        dataCallBack(data) {
            /**
             * 将 apiPermList 合并到同级别 children 中
             * @param {Array} tree 原始树形结构数组
             * @returns {Array} 处理后的树形结构（api 项已合并到 children）
             */
            function mergeApiToChildren(treeData) {
                treeData.forEach(item => {
                    if (item.apiPermList && item.apiPermList.length) {
                        item.children.push(...item.apiPermList.map(api => ({
                            ...api,
                            menuType: 4,
                            menuName: api.apiName
                        })));
                    }
                    if (item.children && item.children.length) {
                        mergeApiToChildren(item.children);
                    }
                    delete item.apiPermList;
                });
                return data;
            }

            this.data = mergeApiToChildren(data);
        },
        handleAdd(row) {
            this.rowData = row
            this.dialogForm.menuId = row.id
            this.$refs.crud.rowAdd()
        },
        handelEdit(row) {
            this.rowData = row
            this.dialogForm.menuId = row.id
            this.$refs.crud.rowEdit(row)
        },
        handelView(row) {
            this.$refs.crud.rowView(row)
        },
        handelDel(row) {
            this.$refs.crud.rowDel(row)
        },
        expandNode(node) {
            this.$refs.crud.toggleExpansion(node, true)
        },
        async handleRowSave(row, done, disabled) {
            const {
                apiName,
                apiUrl,
                method
            } = row
            try {
                const {code, msg, data} = await this.$api.permission.apiScope.create({
                    apiName,
                    apiUrl,
                    method,
                    menuId: this.dialogForm.menuId
                })
                if (code === 200) {
                    this.$message.success('添加成功！' || msg)
                    done()
                    this.getData(this.searchForm)
                    this.expandNode(this.rowData)
                }
            } catch (e) {
                disabled()
            }
        },
        async handleRowUpdate(row, index, done, disabled) {
            const {
                apiName,
                apiUrl,
                method,
                id,
                menuId
            } = row
            this.$refs.crud.validate(async (valid) => {
                if (valid) {
                    try {
                        let {code, msg} = await this.$api.permission.apiScope.update({
                            id,
                            apiName,
                            apiUrl,
                            method,
                            menuId
                        })
                        if (code === 200) {
                            this.$message.success('修改成功！' || msg)
                            done()
                            this.getData(this.searchForm)
                            this.expandNode(this.rowData)
                        }
                    } catch (e) {
                        disabled()
                    }
                }
            })
        },
        async handleRowDel(row, index, done) {
            let that = this
            let params = {
                id: row.id,
            }
            this.$confirm('确认删除吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(async () => {
                    let {code, msg} = await that.$api.permission.apiScope.remove(params.id)
                    if (code === 200) {
                        that.$notify({
                            title: '提示',
                            message: '删除成功',
                            type: 'success',
                            duration: 2000,
                        })
                        done(row)
                    }
                })
        }
    }
}
</script>
<style lang="scss">
.el-dialog__body {
    padding-left: 10px;

    .avue-input-icon__item {
        width: 10% !important;
        height: 70px !important;
        cursor: pointer;
        transition: 0.1s all;
        display: flex;
        flex-direction: column;
        justify-content: center;

        &:hover {
            background-color: #def0f0;
            transform: scale(1) !important;
        }
    }
}

.avue-dialog .el-dialog__header {
    min-height: 60px !important;
}
</style>
